.AbilityOverlayRoot
{
	
	width:100%;
	height: 100%;

}

.abilityRow
{
	flow-children: right;
	width: 100%;
}

.AbilityUp{

	animation-name: ability_up;
	animation-duration:0.2s;
}

.AbilityDown{

	animation-name: ability_down;
	animation-duration:0.2s;
}

@keyframes 'ability_down'
{
	0%
	{
		transform: translateY( 500px );
	}
    
	100%
	{
		transform: translateY( 100px );
	}
}

@keyframes 'ability_up'
{
    0%
    {
        transform: translateY( 100px );
    }
  
    100%
    {
        transform: translateY( 500px );
    }
}

.CenterScreen{
	horizontal-align: center;
	vertical-align: center;
	
}

.BCScreen{
	horizontal-align: center;
	vertical-align: bottom;
	height: 90px;
	margin-left: 280px;
}

.AbilityPanel
{
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.Hidden{
	visibility: collapse;
}

.AbilityPanel.no_ability
{
	visibility: collapse;
}

#LevelUpButton
{
	border: 1px solid black;
    background-color: #c4a529;
	width: 114px;
	height: 28px;
	margin-bottom: 6px;
	visibility: collapse;
}

.could_level_up #LevelUpButton
{
	visibility: visible;
}

#LevelUpButton:hover
{
    background-color: #9e8b2c;
}

#LevelUpButtonInset
{
	width: 100%;
	height: 100%;
	border: 2px solid black;
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #ffffff ), color-stop( 0.1, #c4a529 ), color-stop( 0.75, #9e8b2c ), color-stop( 0.9, #c4a529 ), to( #ffffff ) );
	margin: 1px;
}

#LevelUpButton:hover #LevelUpButtonInset
{
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #ffffff ), color-stop( 0.2, #c4a529 ), color-stop( 0.75, #9e8b2c ), color-stop( 0.8, #c4a529 ), to( #ffffff ) );
}

#LevelUpButton Label
{
	text-transform: uppercase;
	text-shadow: 0px 1px 3px 2.5 #000000;
	color: white;
	vertical-align: center;
	horizontal-align: center;
}

#ButtonAndLevel
{
	flow-children: down;
}

#AbilityButton
{
	width: 45px;
	height: 45px;
	border: 2px solid transparent;

}

.is_passive #AbilityButton
{
	border: 2px solid #00000000;
}

#UpgradeBorder
{
	background-color: transparent;
}

.learnable_ability #UpgradeBorder
{
   background-color: gradient( linear, 0% 0%, 0% 100%, from( #ffffff ), color-stop( 0.1, #c4a529 ), color-stop( 0.75, #9e8b2c ), color-stop( 0.9, #c4a529 ), to( #ffffff ) );
}

#AbilityButton:hover
{
	border: 2px solid white;
}

#AbilityButton:active
{
	border: 4px solid white;
}

.no_level DOTAAbilityImage
{
	saturation: 0;
	brightness: 0.2;
}

.insufficient_mana DOTAAbilityImage
{
	saturation: 0;
	wash-color: #1569be;
}

.potential_upgrade.no_level DOTAAbilityImage
{
	saturation: 1;
	wash-color: white;
}

#AbilityStatusBorder
{
	border: 2px solid #333333;
}

.auto_cast_enabled #AbilityStatusBorder
{
	border: 4px solid orange;
}

.toggle_enabled #AbilityStatusBorder
{
	border: 4px solid green;
}

#AbilityLevelContainer
{
	horizontal-align: center;
	flow-children: right;
}

.LevelPanel
{
	width: 12px;
	height: 12px;
	margin-left: 1px;
	margin-right: 1px;

	border-radius: 3px;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2e2716 ), to( #020302 ) );
	border: 2px solid #ffffff05;
}

.active_level.LevelPanel
{
	background-color: #ceaa31;
	border: 2px solid #734918;
}


